<template>
  <view class="my-join">
    <basic-nav-bar 
      backgroundColor="transparent"
      title="授权登录" 
      :showLeftBack="false"
      :statusBar="true"
      :border="false" 
      :fixed="true">
    </basic-nav-bar>	
    <view class="logo-wrapper">
      <image class="image" src="https://imgs.bestwehotel.com/images/inn/1btP1Iibqa" mode="aspectFill" />
    </view>

    <view class="title">授权提示</view>
    <view class="sub-title">是否同意授权获取微信登录</view>

    <view class="button-wrapper">  
      <button class="join-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意授权微信登录</button>    
      <!-- <button class="join-button" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">
        微信授权登录</button> -->
    </view>
    <!-- 安全区 -->
    <basic-safe-area />
    <get-phone-dialog ref="dialog" @cancel="getPhoneFail" @confirm="getPhoneSuccess"></get-phone-dialog>
  </view>
</template>
<script>
import getPhoneDialog from './components/get-phone-dialog'
import { silenceRegister } from 'api'
import store from '@/store'
// import {CACHE_MEMBER_INFO} from 'utils/enum'
export default {
  name: 'my-join',
  components: { getPhoneDialog },
  data() {
    return {
      code: '',
      userInfo: {},
      phoneDetail: {}
    }
  },
  onLoad() {
    this.getCode()
  },
  methods: {
    getCode() {
      let that = this
      wx.login({
        success (res) {
          // console.log('login code:', res)
          if (res.code) {
            that.code = res.code
          }
        }
      })
    },
    getPhoneNumber(e) {
      // console.log('允许使用手机号：', e)
      const params = {
        code: this.code,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      }
      silenceRegister(params).then(res => {
        if(res.code == 0){
            store.commit('SAVE_TOKEN', res.result)
            wx.showToast({
              title: '登录成功',
              icon: 'none',
              duration: 2000
            })
            setTimeout(()=>{
              wx.navigateBack()
            },2000)
        } else {
            wx.showToast({
              title: '登录失败',
              icon: 'none',
              duration: 2000
            })
        }
      }).catch(() => {
        // 注册失败后，此前的code不能用，需要重新获取code
        this.getCode()
      })
    },
    handleGetUserInfo(e) {
      console.log('微信授权 userInfo:', e)
      let {userInfo} = e.detail
      if (userInfo) {
        this.userInfo = userInfo
        this.$refs.dialog.open()
      } else {
        // do nothing
      }
    },
    getPhoneFail() {
      this.$refs.dialog.close()
      // do nothing
    },
    getPhoneSuccess(detail) {
      this.phoneDetail = detail

      this.joinVip()
    },
    joinVip() {
      let params = {
        nickName: this.userInfo.nickName,
        avatarUrl: this.userInfo.avatarUrl,
        code: this.code,
        ...this.phoneDetail,
        sourceType: this.$global.get('merchantId')
      }
      
      register(params).then(res => {
        let memberInfo = res.data
        this.$store.commit('SAVE_TOKEN', memberInfo)
        
        uni.setStorageSync('CACHE_MEMBER_INFO', {
          nickName: this.userInfo.nickName,
          avatarUrl: this.userInfo.avatarUrl,
          gender : this.userInfo.gender,
          mobile: memberInfo.mobile
        })
        // 执行register回调
        // let registerResolve = this.$global.get('registerResolve')
        // if (registerResolve && registerResolve instanceof Function) {
        //     this.$global.set('registerResolve', '')
        //     registerResolve()
        //   }
        //   uni.redirectTo({
        //     url: '/pages/my/supplement/index'
        //   })
        }).catch(res => {
          if(res.resultCode===401){   // 此账号被禁用        
              // this.$modal.toast('账号异常，请联系酒店管理人员处理')
          }else{
              // this.$modal.toast('哦，好像出了问题，请您稍后再试')
          }
        })
    }
  }
}
</script>
<style lang="less">
.my-join {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  .image {
    width: 168rpx;
    height: 168rpx;

    position: relative;
    left: 50%;
    margin-left: -84rpx;
    margin-top: 200rpx;
  }

  // .logo-wrapper {
  //   // .radius-block;
  //   // .shadow-large;
  //   width: 300rpx;
  //   height: 300rpx;
  //   padding: 30rpx;
  //   background-color: #fff;
  //   margin: 200rpx auto 0;
  //   box-sizing: border-box;

    
  // }
  .title {
    margin-top: 26rpx;
    
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
  }

  .sub-title {
    margin-top: 8rpx;
    
    line-height: 1;
    color: #62656B;
    text-align: center;
  }
  .button-wrapper {
    margin: 94rpx 64rpx 0;
  }
  .join-button {
    .flex;
    .flex-center;
    .flex-middle;
    box-sizing: border-box;
    text-align: center;
    &:after{ border: none;}
    height: 88rpx;
    border-radius: 44rpx;
    background: @theme_color;
    color: #fff;
  }
}
</style>